<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示挂载目标</title>
</head>
<body>
    <!-- 
        您可以指定一个挂载目标（选择器或元素）以限制为仅页面的该区域；
        这也意味着您可以在同一页面上使用多个应用程序来控制不同的区域
     -->
    <script type="module">
        import { createApp } from 'https://unpkg.com/petite-vue?module'
      
        createApp({
          count: 0,
          increment() {
            this.count++
          }
        }).mount("#app1")

        createApp({
            msg:"xiaoyu",
            changeMsg(){
                this.msg="小雨"
            }
        }).mount("#app2")
      </script>

      <div id="app1">
        {{count}}
        <button @click="increment">increment</button>
      </div>
      <div id="app2">
        {{msg}}
        <button @click="changeMsg">更改一下消息</button>
      </div>

</body>
</html>